<template>
	<action-bar type="back" isWhite="1" title="语音广播"></action-bar>
	<tishi ref="showtishi" isclen="1" bgcolor="#fc474c" title="您确定要退出登录吗？"></tishi>
	<view class="patrolinfo u-f u-f-column">
		<view class="navTop" v-show="!fullScreenFlag">

		</view>
		<view class="content u-f">
			<view class="ces" v-show="!conLeft">
				<image mode="widthFix" class="image width60 posiab right0 cursor" :style="{top:'380px'}"
					src="/static/img/gsuanbi.png" @click="conLeft = !conLeft"></image>
			</view>
			<view class=" color9F9F9F size32 posire conLeft  u-f-column u-f" :class="{conLeft1:conLeft}"
				v-show="!fullScreenFlag">
				<image mode="widthFix" class="image width60 posiab right0 cursor" :style="{top:'380px'}"
					src="/static/img/gsuanbi.png" @click="conLeft = !conLeft"></image>
				<view class="tab u-f-item  border-b3e3e3e">
					<view class="item cursor active">
						设备
						<view class="heng "></view>
					</view>
				</view>
				<view class="u-f u-f-column u-f-jsb flex1" style="overflow: hidden;">
					<view class="flex1 u-f u-f-column" style="overflow: hidden;">
						<view class="leftTop flex-a-i posire mt25">
							<view class="flex-ju-c wh120-60 ra10 bg5c5c5c mr20 cursor"
								:class="{LanSeBeiJing:leftTopIndex==index}" v-for="(item,index) in ['组织搜索','通道搜索']"
								:key="index" @click="leftTopIndex = index">
								{{item}}
							</view>
							<!-- <el-input v-model="searchName" class="bg1e1e1e flex1 mr50 height60  pl15"
								placeholder="输入通道名称进行搜索" clearable @blur="getDevicesList" @change="getDevicesList" /> -->
							<input v-model="searchName" class="search-input"
								placeholder="输入通道名称进行搜索" @blur="getDevicesList" @change="getDevicesList" />
							<!-- <image mode="widthFix" class="image width45 posiab right80" src="/static/img/suosuo.png"
								v-if="!searchName">
							</image> -->
						</view>
						<view class="leftList ">
							<view class="sanDian " v-if="dataSource.length">
								<el-dropdown placement="bottom-end">
									<view class="dianBox u-f-justify">
										<view></view>
										<view></view>
										<view></view>
									</view>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click="getDevicesList">刷新</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</view>
							<el-tree style="max-width: 600px;height: 100%;background-color: #2C2C2C;color: #fff;"
								:data="dataSource" node-key="id" default-expand-all>
								<template #default="{ node, data }">
									<view class="custom-tree-node flex-ju-b width1000">
										<view class="flex-a-i" @click="ziyuanShuClick(data)">
											<el-checkbox v-model="data.falg" v-if="data.node_type==2"
												@change="checkboxChange(data)" />
											<view v-if="data.online_status==1" class="staDian">
											</view>
											<view v-if="data.online_status==2" class="staDian1">
											</view>
											<!-- <view v-else class="staDian1">
								
											</view> -->
											<image mode="widthFix" v-if="data.online_status==1&&data.camera_type==3"
												class="image width45" src="/static/img/shexaingtou.png">
											</image>
											<image mode="widthFix" v-if="data.online_status==0&&data.camera_type==3"
												class="image width45" src="/static/img/jiankong/66.png">
											</image>
											<image mode="widthFix" v-if="data.online_status==1&&data.camera_type!=3"
												class="image width45" src="/static/img/jiankong/96.png">
											</image>
											<image mode="widthFix" v-if="data.online_status==0&&data.camera_type!=3"
												class="image width45" src="/static/img/jiankong/97.png">
											</image>
											<view class="labelText">{{data.name}}</view>
										</view>
									</view>
								</template>
							</el-tree>
						</view>
					</view>
				</view>
			</view>
			<view class="rightView u-f u-f-column">
				<view class="box  ">
					<view class="img videoList " :class="{quanPing:fullScreenFlag}">
						<!-- 1分屏 -->
						<view class="img xuanZhongXiaoGuo" v-if="splitScreenStatus==1">
							<spItem :item="shiPingLiuList[0]" @chaHaoClick="chaHaoClick"
								@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
								@liuMaClick="liuMaClick" :type="2">
							</spItem>
						</view>
						<!-- 4分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==2">
							<view class="flex1 u-f-item">
								<view class="flex1" v-for="(item,index) in 2" @click="smallWindowItemClick(index)"
									:class="{xuanZhongXiaoGuo:itemIndex==index,mar10:index==0}" style="height: 100%;">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="flex1 u-f-item" style="margin-top: 10px;">
								<view class="flex1" v-for="(item,index) in 2" @click="smallWindowItemClick(index + 2) "
									:class="{xuanZhongXiaoGuo:itemIndex==index + 2,mar10:index==0}"
									style="height: 100%;">
									<spItem :item="shiPingLiuList[index + 2]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 6分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==3">
							<view class="u-f u-f-jsb" style="height: 66%;width: 100%;">
								<view style="height: 100%;width: 66.5%;" :class="{xuanZhongXiaoGuo:itemIndex==0}"
									@click="smallWindowItemClick(0) ">
									<spItem :item="shiPingLiuList[0]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
								<view class=" u-f u-f-column" style="width: 33%;">
									<view class="flex1" v-for="(item,index) in 2"
										@click="smallWindowItemClick(index + 1) "
										:class="{xuanZhongXiaoGuo:itemIndex==index + 1,mab10:index==0}">
										<spItem :item="shiPingLiuList[index + 1]" @chaHaoClick="chaHaoClick"
											@handleMenuItemClick="handleMenuItemClick"
											@onCaptureFinish="onCaptureFinish" :type="2">
										</spItem>
									</view>
								</view>
							</view>
							<view class="flex1 u-f-item u-f-jsb" style="height: 33%;margin-top: 10px;">
								<view class=" img" style="width: 33%;" v-for="(item,index) in 3"
									@click="smallWindowItemClick(index + 3) "
									:class="{xuanZhongXiaoGuo:itemIndex==index + 3}">
									<spItem :item="shiPingLiuList[index + 3]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 8分屏 -->
						<view class="img u-f u-f-jsb" v-if="splitScreenStatus==4">
							<view class="u-f-column u-f-jsb" style="width: 75%;height: 100%;margin-right: 10px;">
								<view class="img" style="height: 75%;" :class="{xuanZhongXiaoGuo:itemIndex==0}"
									@click="smallWindowItemClick(0) ">
									<spItem :item="shiPingLiuList[0]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
								<view class="u-f-item u-f-jsb" style="height: 24.7%;margin-top: 10px;">
									<view class="img flex1" v-for="(item,index) in 3"
										@click="smallWindowItemClick(index + 1)"
										:class="{xuanZhongXiaoGuo:itemIndex==index + 1,mar10:index==0||index==1}">
										<spItem :item="shiPingLiuList[index + 1]" @chaHaoClick="chaHaoClick"
											@handleMenuItemClick="handleMenuItemClick"
											@onCaptureFinish="onCaptureFinish" :type="2">
										</spItem>
									</view>
								</view>
							</view>
							<view class="flex1 u-f u-f-column" style="padding-right: 10px;">
								<view class="img flex1 "
									:class="{xuanZhongXiaoGuo:itemIndex==index + 4,mab10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index + 4) ">
									<spItem :item="shiPingLiuList[index + 4]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 9分屏 -->
						<view class="u-f img" v-if="splitScreenStatus==5">
							<view class="u-f u-f-column flex1 img">
								<view class="img flex1"
									:class="{xuanZhongXiaoGuo:itemIndex==index,mab10:index==0||index==1}"
									v-for="(item,index) in 3" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f u-f-column flex1 img" style="margin: 0 10px;">
								<view class="img flex1"
									:class="{xuanZhongXiaoGuo:itemIndex==index + 3,mab10:index==0||index==1}"
									v-for="(item,index) in 3" @click="smallWindowItemClick(index + 3) ">
									<spItem :item="shiPingLiuList[index + 3]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f u-f-column flex1 img">
								<view class="img flex1"
									:class="{xuanZhongXiaoGuo:itemIndex==index + 6,mab10:index==0||index==1}"
									v-for="(item,index) in 3" @click="smallWindowItemClick(index + 6) ">
									<spItem :item="shiPingLiuList[index + 6]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 13分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==6">
							<view class="flex1 u-f-item">
								<view class="img flex1"
									:class="{xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f" style="flex: 2;margin:10px 0">
								<view class="flex1 u-f-column u-f">
									<view class="img flex1"
										:class=" {xuanZhongXiaoGuo:itemIndex==index + 4,mab10:index==0}"
										v-for="(item,index) in 2" @click="smallWindowItemClick(index + 4) ">
										<spItem :item="shiPingLiuList[index + 4]" @chaHaoClick="chaHaoClick"
											@handleMenuItemClick="handleMenuItemClick"
											@onCaptureFinish="onCaptureFinish" :type="2">
										</spItem>
									</view>
								</view>
								<view style="flex: 2;margin: 0 10px;" :class="{xuanZhongXiaoGuo:itemIndex==6}"
									@click="smallWindowItemClick(6) ">
									<spItem :item="shiPingLiuList[6]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
								<view class="flex1 u-f-column u-f">
									<view class="img flex1"
										:class="{xuanZhongXiaoGuo:itemIndex==index + 7,mab10:index==0}"
										v-for="(item,index) in 2" @click="smallWindowItemClick(index + 7) ">
										<spItem :item="shiPingLiuList[index + 7]" @chaHaoClick="chaHaoClick"
											@handleMenuItemClick="handleMenuItemClick"
											@onCaptureFinish="onCaptureFinish" :type="2">
										</spItem>
									</view>
								</view>
							</view>
							<view class="flex1 u-f-item">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 9,mar10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index + 9) ">
									<spItem :item="shiPingLiuList[index + 9]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 15分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==7||splitScreenStatus==19">
							<view class="u-f flex1">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin: 10px 0;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 5,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index + 5) ">
									<spItem :item="shiPingLiuList[index + 5]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 10,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index + 10) ">
									<spItem :item="shiPingLiuList[index + 10]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 16分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==8||splitScreenStatus==20">
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 4,mar10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index + 4) ">
									<spItem :item="shiPingLiuList[index +4]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +8,mar10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index + 8) ">
									<spItem :item="shiPingLiuList[index +8]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +12,mar10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index + 12) ">
									<spItem :item="shiPingLiuList[index +12]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>

						<!-- 20分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==9||splitScreenStatus==21">
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +5,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index + 5) ">
									<spItem :item="shiPingLiuList[index +5]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +10,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index + 10) ">
									<spItem :item="shiPingLiuList[index +10]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +15,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index + 15) ">
									<spItem :item="shiPingLiuList[index +15]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>

						<!-- 25分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==10">
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +5,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index + 5) ">
									<spItem :item="shiPingLiuList[index +5]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +10,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index + 10) ">
									<spItem :item="shiPingLiuList[index +10]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +15,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index + 15) ">
									<spItem :item="shiPingLiuList[index +15]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +20,mar10:index==0||index==1||index==2||index==3}"
									v-for="(item,index) in 5" @click="smallWindowItemClick(index + 20) ">
									<spItem :item="shiPingLiuList[index +20]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>

						<!-- 32分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==11">
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class="{xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +8,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 8) ">
									<spItem :item="shiPingLiuList[index + 8]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +16,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 16) ">
									<spItem :item="shiPingLiuList[index + 16]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +24,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 24) ">
									<spItem :item="shiPingLiuList[index + 24]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 36分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==12||splitScreenStatus==23">
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3||index==4}"
									v-for="(item,index) in 6" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 6,mar10:index==0||index==1||index==2||index==3||index==4}"
									v-for="(item,index) in 6" @click="smallWindowItemClick(index + 6) ">
									<spItem :item="shiPingLiuList[index + 6]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 12,mar10:index==0||index==1||index==2||index==3||index==4}"
									v-for="(item,index) in 6" @click="smallWindowItemClick(index + 12) ">
									<spItem :item="shiPingLiuList[index + 12]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 18,mar10:index==0||index==1||index==2||index==3||index==4}"
									v-for="(item,index) in 6" @click="smallWindowItemClick(index + 18) ">
									<spItem :item="shiPingLiuList[index + 18]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 24,mar10:index==0||index==1||index==2||index==3||index==4}"
									v-for="(item,index) in 6" @click="smallWindowItemClick(index + 24) ">
									<spItem :item="shiPingLiuList[index + 24]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 30,mar10:index==0||index==1||index==2||index==3||index==4}"
									v-for="(item,index) in 6" @click="smallWindowItemClick(index + 30) ">
									<spItem :item="shiPingLiuList[index + 30]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>


						<!-- 64分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==13">
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +8,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 8) ">
									<spItem :item="shiPingLiuList[index +8]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index+16,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 16) ">
									<spItem :item="shiPingLiuList[index+16]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index+24,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 24) ">
									<spItem :item="shiPingLiuList[index+24]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index+32,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 32) ">
									<spItem :item="shiPingLiuList[index+32]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index+40,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 40) ">
									<spItem :item="shiPingLiuList[index+40]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index+48,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 48) ">
									<spItem :item="shiPingLiuList[index+48]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index+56,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 56) ">
									<spItem :item="shiPingLiuList[index + 56]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>

						<!-- 宽屏 4分屏 -->
						<view class="img u-f-item" v-if="splitScreenStatus==14">
							<view class="flex1 img" @click="smallWindowItemClick(0) "
								:class=" {xuanZhongXiaoGuo:itemIndex==0}">
								<spItem :item="shiPingLiuList[0]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									:type="2">
								</spItem>
							</view>
							<view class="flex1 img u-f-column u-f" style="margin-left: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index+1,mar10:index==0||index==1,mab10:index==0||index==1}"
									v-for="(item,index) in 3" @click="smallWindowItemClick(index + 1) ">
									<spItem :item="shiPingLiuList[index + 1]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 宽屏 6分屏 -->
						<view class="img u-f-item u-f-column" v-if="splitScreenStatus==15">
							<view class="u-f-item flex1 img">
								<view class="img flex1" :class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0}"
									v-for="(item,index) in 2" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="flex1 img u-f-item" style="margin-top: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index +2,mar10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index + 2) ">
									<spItem :item="shiPingLiuList[index + 2]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 宽屏 7分屏 -->
						<view class="img u-f" v-if="splitScreenStatus==16">
							<view class="flex1 u-f u-f-column img">
								<view class="img flex1" :class=" {xuanZhongXiaoGuo:itemIndex==index,mab10:index==0}"
									v-for="(item,index) in 2" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="flex1 u-f u-f-column img" style="margin: 0 10px;">
								<view class="img flex1" :class=" {xuanZhongXiaoGuo:itemIndex==index + 2,mab10:index==0}"
									v-for="(item,index) in 2" @click="smallWindowItemClick(index + 2) ">
									<spItem :item="shiPingLiuList[index + 2]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="flex1 u-f u-f-column img">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 4,mab10:index==0||index==1}"
									v-for="(item,index) in 3" @click="smallWindowItemClick(index + 4) ">
									<spItem :item="shiPingLiuList[index + 4]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 宽屏 9分屏 -->
						<view class="img u-f" v-if="splitScreenStatus==17">
							<view class="u-f u-f-column img" style="flex:2">
								<view class="" style="flex:2;margin-bottom: 10px;" @click="smallWindowItemClick(0) "
									:class="{xuanZhongXiaoGuo:itemIndex==0}">
									<spItem :item="shiPingLiuList[0]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
								<view class="u-f flex1">
									<view class="img flex1"
										:class=" {xuanZhongXiaoGuo:itemIndex==index + 1,mar10:index==0}"
										v-for="(item,index) in 2" @click="smallWindowItemClick(index + 1) ">
										<spItem :item="shiPingLiuList[index + 1]" @chaHaoClick="chaHaoClick"
											@handleMenuItemClick="handleMenuItemClick"
											@onCaptureFinish="onCaptureFinish" :type="2">
										</spItem>
									</view>
								</view>
							</view>
							<view class="flex1 u-f img u-f-column" style="margin: 0 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 3,mab10:index==0||index==1}"
									v-for="(item,index) in 3" @click="smallWindowItemClick(index + 3) ">
									<spItem :item="shiPingLiuList[index + 3]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="flex1 u-f img u-f-column">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 6,mab10:index==0||index==1}"
									v-for="(item,index) in 3" @click="smallWindowItemClick(index + 6) ">
									<spItem :item="shiPingLiuList[index + 6]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 12分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==18">
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 4,mar10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index + 4) ">
									<spItem :item="shiPingLiuList[index + 4]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 8,mar10:index==0||index==1||index==2}"
									v-for="(item,index) in 4" @click="smallWindowItemClick(index + 8) ">
									<spItem :item="shiPingLiuList[index + 8]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 24分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==22">
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3||index==4}"
									v-for="(item,index) in 6" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 6,mar10:index==0||index==1||index==2||index==3||index==4}"
									v-for="(item,index) in 6" @click="smallWindowItemClick(index + 6) ">
									<spItem :item="shiPingLiuList[index + 6]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 12,mar10:index==0||index==1||index==2||index==3||index==4}"
									v-for="(item,index) in 6" @click="smallWindowItemClick(index + 12) ">
									<spItem :item="shiPingLiuList[index + 12]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 18,mar10:index==0||index==1||index==2||index==3||index==4}"
									v-for="(item,index) in 6" @click="smallWindowItemClick(index + 18) ">
									<spItem :item="shiPingLiuList[index + 18]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
						<!-- 48分屏 -->
						<view class="img u-f u-f-column" v-if="splitScreenStatus==24">
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index) ">
									<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 8,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 8) ">
									<spItem :item="shiPingLiuList[index + 8]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 16,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 16) ">
									<spItem :item="shiPingLiuList[index + 16]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 24,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 24) ">
									<spItem :item="shiPingLiuList[index + 24]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 32,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 32) ">
									<spItem :item="shiPingLiuList[index + 32]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
							<view class="u-f flex1" style="margin-bottom: 10px;">
								<view class="img flex1"
									:class=" {xuanZhongXiaoGuo:itemIndex==index + 40,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
									v-for="(item,index) in 8" @click="smallWindowItemClick(index + 40) ">
									<spItem :item="shiPingLiuList[index + 40]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										:type="2">
									</spItem>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom" v-show="!fullScreenFlag">
					<view class="diYiHang u-f-item u-f-jsb">
						<view class="sbzt u-f-item singleLine">
							设备状态：
							<!-- <uni-data-select v-model="planListItem" :localdata="staType" :clear="false"
								@change="zhuangTaiChange" style="width: 120px;color: #000;z-index: 999;"
								class="custom-select" placement="top">
							</uni-data-select> -->
							<el-select v-model="planListItem" placeholder="请选择状态" style="width: 120px;color: #000;z-index: 999;"
								class="custom-select" @change="zhuangTaiChange" >
							  <el-option v-for="(item,index) in staType" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
							<view class="input">
								<input class="search-input" v-model="searchText"  placeholder="输入设备名称" clearable
									@input="blur" />
							</view>
						</view>
						<view class="kqgb u-f-justify" @click="openClick" v-if="!openFalg">
							<view class="icon">
								<image src="/static/img/jiankong/101.png" mode="widthFix"></image>
							</view>
							<view>开启广播</view>
						</view>
						<view class="kqgb1 u-f-justify" @click="openClick" v-else>
							<view class="icon">
								<image src="/static/img/jiankong/104.png" mode="widthFix"></image>
							</view>
							<view>开启广播</view>
						</view>
						<view class="u-f-item mr30">
							<view class="lunxun u-f-item u-f-justify cursor singleLine"
								@click.stop="screenSetFlag = !screenSetFlag">
								<view>
									<image src="/static/img/jiankong/11.png" class="u-f-justify"
										style="width: 16px;margin-right: 5px;" mode="widthFix"></image>
								</view>
								<view>
									布局
								</view>
							</view>
							<view class="lunxun u-f-item u-f-justify cursor singleLine" @click="quanPingFn ">
								<view>
									<image src="/static/img/jiankong/12.png" class="u-f-justify"
										style="width: 16px;margin-right: 5px;" mode="widthFix"></image>
								</view>
								<view>
									全屏
								</view>
							</view>
						</view>
					</view>
					<view class="DiYiHang u-f-item">
						<view class="name u-f-justify">
							<text>序号</text>
						</view>
						<view class="miaoShu u-f-item singleLine">
							<text>设备名称</text>
						</view>
						<view class="type u-f-justify">
							<text>设备类型</text>
						</view>
						<view class="sta u-f-justify">
							状态
						</view>
						<view class="caoZuo u-f-justify">
							操作
						</view>
					</view>
					<scroll-view scroll-y style="height: 130px;" :show-scrollbar="false">
						<view class="DiYiHang u-f-item"
							v-for="(item,index) in searchText==''&&planListItem==''?allList:allList1" :key="index">
							<view class="name u-f-justify">
								<text>{{index + 1}}</text>
							</view>
							<view class="miaoShu u-f-item singleLine">
								<text>{{item.name}}</text>
							</view>
							<view class="type u-f-justify">
								<text>{{item.device_type==1?'IPC':item.device_type==2?'NVR':item.device_type==3?'DVR':item.device_type==4?'MDVR':item.device_type==5?'MTU300':item.device_type==6?'全景眼':item.device_type==16?'ar':item.device_type==20?'热成像':item.device_type==23?'cvr':''}}</text>
							</view>
							<view class="sta u-f-justify">
								<view class="sta1 u-f-justify" v-if="item.sta=='未打开'">未打开</view>
								<view class="sta2 u-f-justify" v-if="item.sta=='已打开'">已打开</view>
								<view class="sta3 u-f-justify" v-if="item.sta=='打开失败'">打开失败</view>
							</view>
							<view class="caoZuo u-f-justify">
								<view class="u-f-item shanchu cursor" @click="deleteClick(index)">
									<view>
										<image src="/static/img/jiankong/68.png" style="width: 16px;" mode="widthFix">
										</image>
									</view>
									<view class="text">删除</view>
								</view>
							</view>
						</view>
					</scroll-view>

				</view>

			</view>
		</view>
		<!-- 布局的弹窗 -->
		<view class="LayoutPop" v-show="screenSetFlag" ref="LayoutPop">
			<view class="title">
				标准布局
			</view>
			<view class="list u-f-wrap u-f">
				<view class="item u-f-justify u-f-column cursor" v-for="(item,index) in screenSetList" :key="index"
					:class="{item1:splitScreenStatus==item.sta}"
					@click="splitScreenStatus = item.sta,itemIndex = 0,DanFenPing = false,getSliderVluer()">
					<view class="icon">
						<image :src="splitScreenStatus==item.sta?item.icon1:item.icon" class="img" mode="widthFix">
						</image>
					</view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
			<view class="title">
				宽屏布局
			</view>
			<view class="list u-f-wrap u-f">
				<view class="item u-f-justify u-f-column cursor" v-for="(item,index) in screenSetList2" :key="index"
					:class="{item1:splitScreenStatus==item.sta}"
					@click="splitScreenStatus = item.sta,itemIndex = 0,DanFenPing = false">
					<view class="icon">
						<image :src="splitScreenStatus==item.sta?item.icon1:item.icon" class="img" mode="widthFix">
						</image>
					</view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import spItem from "@/components/lk/sp/index.vue"
	// 引入 布局未选中的图片
	import img22 from "@/static/img/jiankong/22.png"
	import img23 from "@/static/img/jiankong/23.png"
	import img24 from "@/static/img/jiankong/24.png"
	import img25 from "@/static/img/jiankong/25.png"
	import img26 from "@/static/img/jiankong/26.png"
	import img27 from "@/static/img/jiankong/27.png"
	import img28 from "@/static/img/jiankong/28.png"
	import img29 from "@/static/img/jiankong/29.png"
	import img30 from "@/static/img/jiankong/30.png"
	import img31 from "@/static/img/jiankong/31.png"
	import img32 from "@/static/img/jiankong/32.png"
	import img33 from "@/static/img/jiankong/33.png"
	import img44 from "@/static/img/jiankong/44.png"
	import img45 from "@/static/img/jiankong/45.png"
	import img46 from "@/static/img/jiankong/46.png"
	import img47 from "@/static/img/jiankong/47.png"
	import img48 from "@/static/img/jiankong/48.png"
	import img49 from "@/static/img/jiankong/49.png"
	import img50 from "@/static/img/jiankong/50.png"
	import img74 from "@/static/img/jiankong/74.png"
	// 引入 布局选中的图片
	import img21 from "@/static/img/jiankong/21.png"
	import img75 from "@/static/img/jiankong/75.png"
	import img76 from "@/static/img/jiankong/76.png"
	import img77 from "@/static/img/jiankong/77.png"
	import img78 from "@/static/img/jiankong/78.png"
	import img79 from "@/static/img/jiankong/79.png"
	import img80 from "@/static/img/jiankong/80.png"
	import img81 from "@/static/img/jiankong/81.png"
	import img82 from "@/static/img/jiankong/82.png"
	import img83 from "@/static/img/jiankong/83.png"
	import img84 from "@/static/img/jiankong/84.png"
	import img85 from "@/static/img/jiankong/85.png"
	import img86 from "@/static/img/jiankong/86.png"
	import img87 from "@/static/img/jiankong/87.png"
	import img88 from "@/static/img/jiankong/88.png"
	import img89 from "@/static/img/jiankong/89.png"
	import img90 from "@/static/img/jiankong/90.png"
	import img91 from "@/static/img/jiankong/91.png"
	import img92 from "@/static/img/jiankong/92.png"
	import img93 from "@/static/img/jiankong/93.png"
	import img94 from "@/static/img/jiankong/94.png"
	import img95 from "@/static/img/jiankong/95.png"
	import {
		lkrequest,
		lkfetch
	} from '../../js/lk/request.js'
	import {
		ElMessage
	} from 'element-plus'
	import voiceIntercomService from '../../js/lk/VoiceIntercomService.js'
	export default {
		components: {
			spItem
		},
		data() {
			return {
				dataSource: [],
				leftTopIndex: 0,
				searchName: '',
				tabIndex: 0,
				shiPingLiuList: [],
				splitScreenStatus: 1,
				screenSetList: [{
						icon: img74,
						text: '1分屏',
						sta: 1,
						icon1: img21,
						chuangKou: 1
					},
					{
						icon: img22,
						text: '4分屏',
						sta: 2,
						icon1: img75,
						chuangKou: 4
					},
					{
						icon: img23,
						text: '6分屏',
						sta: 3,
						icon1: img76,
						chuangKou: 6
					},
					{
						icon: img24,
						text: '8分屏',
						sta: 4,
						icon1: img77,
						chuangKou: 8
					},
					{
						icon: img25,
						text: '9分屏',
						sta: 5,
						icon1: img78,
						chuangKou: 9
					},
					{
						icon: img26,
						text: '13分屏',
						sta: 6,
						icon1: img79,
						chuangKou: 13
					},
					{
						icon: img30,
						text: '15分屏',
						sta: 7,
						icon1: img80,
						chuangKou: 15
					},
					{
						icon: img27,
						text: '16分屏',
						sta: 8,
						icon1: img81,
						chuangKou: 16
					},
					{
						icon: img28,
						text: '20分屏',
						sta: 9,
						icon1: img82,
						chuangKou: 20
					},
					{
						icon: img29,
						text: '25分屏',
						sta: 10,
						icon1: img83,
						chuangKou: 25
					},
					{
						icon: img31,
						text: '32分屏',
						sta: 11,
						icon1: img84,
						chuangKou: 32
					},
					{
						icon: img32,
						text: '36分屏',
						sta: 12,
						icon1: img85,
						chuangKou: 36
					},
					{
						icon: img33,
						text: '64分屏',
						sta: 13,
						icon1: img86,
						chuangKou: 64
					}
				],
				screenSetList2: [{
						icon: img44,
						text: '4分屏',
						sta: 14,
						icon1: img87,
						chuangKou: 4
					},
					{
						icon: img45,
						text: '6分屏',
						sta: 15,
						icon1: img88,
						chuangKou: 6
					},
					{
						icon: img46,
						text: '7分屏',
						sta: 16,
						icon1: img89,
						chuangKou: 7
					},
					{
						icon: img47,
						text: '9分屏',
						sta: 17,
						icon1: img90,
						chuangKou: 9
					},
					{
						icon: img48,
						text: '12分屏',
						sta: 18,
						icon1: img91,
						chuangKou: 12
					},
					{
						icon: img30,
						text: '15分屏',
						sta: 19,
						icon1: img92,
						chuangKou: 15
					},
					{
						icon: img27,
						text: '16分屏',
						sta: 20,
						icon1: img81,
						chuangKou: 16
					},
					{
						icon: img28,
						text: '20分屏',
						sta: 21,
						icon1: img82,
						chuangKou: 20
					},
					{
						icon: img49,
						text: '24分屏',
						sta: 22,
						icon1: img94,
						chuangKou: 24
					},
					{
						icon: img32,
						text: '36分屏',
						sta: 23,
						icon1: img85,
						chuangKou: 36
					},
					{
						icon: img50,
						text: '48分屏',
						sta: 24,
						icon1: img95,
						chuangKou: 48
					},
				],
				screenSetFlag: false,
				clickCount: 0,
				timer: null,
				itemIndex: 0,
				conLeft: true,
				allList: [],
				staType: [{
						label: '未打开',
						value: '未打开',
					},
					{
						label: '已打开',
						value: '已打开',
					},
					{
						label: '打开失败',
						value: '打开失败',
					}
				],
				searchText: '',
				allList1: [],
				fullScreenFlag: false,
				openFalg: false,
				planListItem: ''
			}
		},
		onShow() {
			if (flutter) {
				flutter.call('setActionBar', {
					type: 'back',
					title: "语音广播",
					isWhite: true,
					onDownloads: "",
					onSettings: '',
					onBack: 'handleBack()',
					onClose: 'handleClickclose()'
				}, (result, error) => {})
			}
			window.handleClickclose = () => {
				uni.$emit('exitclose')
				this.$refs.showtishi.show()
			}
			window.handleBack = () => {
				this.back()
			}
		},
		mounted() {
			for (let i = 0; i < 64; i++) {
				this.shiPingLiuList.push({
					index: i
				})
			}
			document.addEventListener('click', this.handleClickOutside);
			// 监听全屏ESC退出
			document.addEventListener('keydown', this.handleKeyDown);
		},
		beforeDestroy() {
			// 移除键盘事件监听
			document.removeEventListener('click', this.handleClickOutside);

		},
		onLoad(e) {
			this.getDevicesList()
		},
		methods: {
			getDevicesList() {
				// 设备列表
				this.dataSource = []
				this.http('/v1/organization/tree/list', {
					sourceType: 5,
					searchName: this.searchName,
					searchType: this.leftTopIndex + 1
				}).then(res => {
					this.dataSource = res.data
					this.ShuZhuChongZhu(this.dataSource)
					this.updateFlags(this.dataSource, this.allList)
				})
			},
			// 处理布局弹窗点击外面隐藏
			handleClickOutside(event) {
				if (this.screenSetFlag) {
					const modalContent = this.$refs.LayoutPop.$el;
					if (modalContent && !modalContent.contains(event.target)) {
						this.screenSetFlag = false;
					}
				}
			},
			//在多分屏点击窗口
			smallWindowItemClick(index) {
				this.clickCount += 1;
				this.itemIndex = index
				if (this.clickCount === 1) {
					this.timer = setTimeout(() => {
						this.clickCount = 0;
					}, 250); // 自定义间隔时间（如 250ms）
				} else if (this.clickCount === 2) {
					if (this.shiPingLiuList[index].streamUrl) {
						this.DanFenPing = true
					}
					clearTimeout(this.timer);
					this.clickCount = 0;
				}
			},
			checkboxChange(data) {
				if (data.falg) {
					data.sta = '未打开'
					this.allList.push(data)
				} else {
					this.allList = this.allList.filter(item => item.id !== data.id);
				}
			},
			deleteClick(index) {
				if (this.searchText) {
					this.allList.forEach((i, n) => {
						if (i.id == this.allList1[index].id) {
							i.falg = false
							setTimeout(() => {
								this.allList.splice(n, 1)
							}, 200)
						}
					})
					this.allList1.splice(index, 1)
				} else {
					this.allList[index].falg = false
					this.allList.splice(index, 1)
				}

			},
			blur(e) {
				this.allList1 = this.allList.filter(item => item.name.includes(this.searchText))
			},
			zhuangTaiChange(e) {
				console.log(e,'000');
				this.planListItem = e
				this.allList1 = this.allList.filter(item => item.sta.includes(e))
			},
			ziyuanShuClick(data) {
				this.clickCount += 1;
				if (this.clickCount === 1) {
					this.timer = setTimeout(() => {
						this.clickCount = 0;
					}, 250); // 自定义间隔时间（如 250ms）
				} else if (this.clickCount === 2) {
					if (data.online_status == 1 || data.onlineStatus == 1) {
						lkrequest(`devices/${data.device_code||data.deviceCode}/channels/${data.id}/getVideoRealtimeUrl`, {
								netType: 2,
								protocolType: 9,
								streamType: 1
							}, 'post', 'getVideoRealtimeUrl')
							.then(res => {
								res.data.name = data.name
								res.data.index = this.itemIndex
								res.data.id = data.id
								res.data.device_code = data.device_code || data.deviceCode
								res.data.is_support_ptz = data.is_support_ptz || data.isSupportPTZ

								if (process.env.NODE_ENV !== 'development') {
									res.data.streamUrl = res.data.streamUrl.replace("http://", "https://").replace(
										"121.89.195.116:9980", "lov.wexiang.vip/monitort"); // 替换域名部分
								}
								this.shiPingLiuList[this.itemIndex] = {}
								this.shiPingLiuList[this.itemIndex] = res.data
							})
					}
					clearTimeout(this.timer);
					this.clickCount = 0;
				}
			},
			async getAudioChannel(id) {
				// ❗换成你实际的请求方式
				try {
					const res = await fetch(`/api/audio-channel/${id}`)
					const data = await res.json()
					return data.streamUrl
				} catch (err) {
					console.error('请求失败:', id, err)
					throw err
				}
			},

			async startBroadcast() {
				this.errorList = []
				this.connectionIds = []

				for (const id of this.allList) {
					try {
						const url = await this.getAudioChannel(id)
						const connectionId = await this.$voiceIntercomService.startWebSocketSession(url)
						this.connectionIds.push(connectionId)
					} catch (err) {
						this.errorList.push(id)
					}
				}

				this.$voiceIntercomService.setShouting(true)
			},

			stopBroadcast() {
				this.connectionIds.forEach(id => {
					this.$voiceIntercomService.stopVoiceIntercom(id)
				})
				this.connectionIds = []
				this.$voiceIntercomService.setShouting(false)
			},
			async openClick() {
				if (!this.allList.length) {
					return ElMessage.error(`通道列表为空，请选择通道在开启广播！`)
				}
				this.openFalg = !this.openFalg
				if (this.openFalg) {
					uni.showLoading({
						title: '正在开启对讲...'
					});
					try {
						// 使用 Promise.all 并行请求所有 URL
						const promises = this.allList.map((info) =>
							this.fetchSingleUrl(info)
						);

						// 等待所有请求完成，并按顺序存储结果
						let arr = await Promise.all(promises);

						const promises1 = arr.map((info) =>
							this.fetchSingleUrl1(info)
						);
						let arr1 = await Promise.all(promises1);

						arr1.forEach((item, index) => {
							if (item.DuiJiang) {
								this.allList[index].sta = '已打开'
							} else {
								this.allList[index].sta = '打开失败'
							}
							this.shiPingLiuList[index] = {}
							this.shiPingLiuList[index] = item
						})
						this.splitScreenStatus = 2
					} catch (error) {
						console.error("请求出错:", error);

					} finally {

					}
				} else {
					this.shiPingLiuList.forEach((item, index) => {
						if (item.DuiJiang) {
							voiceIntercomService.stopVoiceIntercom(item.connectionId);
							item.DuiJiang = false;
						}
					})
					this.allList.forEach((item, index) => {
						this.allList[index].sta = '未打开'
					})
					uni.showToast({
						title: '已关闭对讲',
						icon: 'success'
					});
					return;
				}

			},
			// 单个请求方法
			async fetchSingleUrl(info) {
				try {
					const res = await lkrequest(
						`devices/${info.device_code}/channels/${info.id}/getVideoRealtimeUrl`, {
							netType: 2,
							protocolType: 9,
							streamType: 1
						}, 'post', 'getVideoRealtimeUrl')
					res.data.name = info.name
					res.data.id = info.id
					res.data.device_code = info.device_code || info.deviceCode
					res.data.is_support_ptz = info.is_support_ptz || info.isSupportPTZ
					if (process.env.NODE_ENV !== 'development') {
						res.data.streamUrl = res.data.streamUrl.replace("http://", "https://").replace(
							"121.89.195.116:9980", "lov.wexiang.vip/monitort"); // 替换域名部分
					}
					return res.data; // 假设返回 { url: "..." }
				} catch (error) {
					console.error(`请求失败:`, error);
					return null; // 或返回一个默认 URL
				}
			},
			// 单个请求方法
			async fetchSingleUrl1(item) {
				try {
					console.log(item)
					// 1. 获取WebSocket地址
					const res = await lkrequest(
						`plat/devices/${item.device_code||item.deviceCode}/channels/${item.id}/getAudioChannel`, {
							netType: 2,
							protocolType: 9
						},
						'post',
						'getAudioChannel'
					);
					if (!res.data.streamUrl) throw new Error('未获取到流地址');
					// 2. 建立WebSocket连接
					item.connectionId = await voiceIntercomService.startWebSocketSession(res.data.streamUrl);

					// 3. 开始音频采集（关键调用位置）
					await voiceIntercomService.startAudioCapture();

					// 4. 设置喊话状态
					voiceIntercomService.setShouting(true);

					item.DuiJiang = true;
					uni.showToast({
						title: '对讲已开启',
						icon: 'success'
					});

					return {
						...res.data,
						...item
					}; // 假设返回 { url: "..." }
				} catch (error) {
					console.error(`请求失败:`, error);
					return {}; // 或返回一个默认 URL
				}
			},
			// 右键后被点击的回调
			handleMenuItemClick(data) {

				if (data.index == 1) {
					// 关闭单视频
					this.shiPingLiuList[data.item.index] = {}
				}
				if (data.index == 2) {
					// 关闭所有视频
					this.guanBiSuoYouShiPing()
				}
				if (data.index == 3) {
					// 关闭所有视频
					this.KaiFaZhong()
				}
				if (data.index == 8) {
					// 视频全屏
					this.quanPingFn()
				}
			},
			//单个视频点击❌
			chaHaoClick(data) {
				this.shiPingLiuList[data.index] = {}
			},
			// 全屏
			quanPingFn() {
				this.fullScreenFlag = true
				flutter.call('setFullScreen', {
					isFullScreen: true
				}, (result, error) => {

				});
			},
			// ESC退出全屏
			handleKeyDown() {
				if (event.key === 'Escape' || event.keyCode === 27) {
					if (this.fullScreenFlag) {
						this.fullScreenFlag = false
						flutter.call('setFullScreen', {
							isFullScreen: false
						}, (result, error) => {
							console.log('ESC 键被按下了1', error);
							console.log('ESC 键被按下了2', result);
						});
					}
					console.log('ESC 键被按下了3');
					// 在这里添加你的逻辑，例如关闭弹窗
				}
			},
			guanBiSuoYouShiPing() {
				// 关闭所有视频
				this.shiPingLiuList = []
				for (let i = 0; i < 64; i++) {
					this.shiPingLiuList.push({
						index: i
					})
				}
			},
		},

	}
</script>

<style scoped>
	/* 覆盖默认样式 */
	.custom-select /deep/ .uni-select__input-text {
		color: #fff;
		/* 修改文字颜色 */
		font-size: 16px;
		/* 修改文字大小 */
		font-weight: bold;
		/* 修改文字粗细 */
	}

	.custom-select /deep/ .uni-select {
		border: none;
		background: #5c5c5c;
		border-radius: 6px;
	}

	/deep/ .el-tree-node__content:hover {
		background: #1e1e1e;
	}
	/deep/ .el-select__wrapper{
		background-color: #1E1E1E;
		box-shadow: none;
	}

	/deep/.el-tree-node:focus>.el-tree-node__content {
		background: #1e1e1e;
	}
</style>
<style scoped lang="scss">
	.search-input{
		background: #1e1e1e;
		width: 170px;
		height: 30px;
		border-radius: 5px;
		position: relative;
		display: flex;
		padding:1px 10px;
		font-size: 14px;
	}
	.img {
		width: 100%;
		height: 100%;
	}
	.patrolinfo {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		color: #fff;
		background-color: #212121;

		.navTop {
			padding: 0 24px 0 32px;
			background-color: #2C2C2C;
			border-bottom: 1px solid #383838;
			min-height: 50px;
		}

		.content {
			flex: 1;
			overflow: hidden;

			.ces {
				position: relative;
				transition: all 0.3s;
				opacity: 1;

				image {
					transform: rotate(180deg);
					left: -10px;
				}
			}

			.conLeft {
				overflow: hidden;
				transition: all 0.3s;
				height: 100%;
				width: 0;
				background: #2c2c2c;

				.leftTop {
					padding-left: 24px;
					margin-bottom: 24px;

					.LanSeBeiJing {
						background: #165fff;
						color: #fff;
					}

					input {
						color: #fff;
					}

					.wh120-60 {
						width: 80px
					}
				}

				.leftList {
					flex: 1;

					.sanDian {
						position: absolute;
						right: 10px;
						top: 72px;
						z-index: 9;

						.dianBox {
							width: 40px;
							height: 16px;
							border: none;

							view {
								width: 4px;
								height: 4px;
								background: #ffffff;
								margin-right: 4px;
							}
						}

					}

					.custom-tree-node {
						margin-left: 10px;

						.width45 {
							margin-right: 5px;
						}

						.staDian {
							width: 6px;
							height: 6px;
							border-radius: 50%;
							background-color: #00E47C;
							margin-left: 5px;
							margin-right: 10px;
						}

						.staDian1 {
							width: 6px;
							height: 6px;
							border-radius: 50%;
							background-color: #FF5964;
							margin-left: 5px;
							margin-right: 10px;
						}
					}
				}


				.tab {
					width: 411px;
					min-height: 42px;

					.item {
						margin: 0 24px;
						position: relative;
						color: #fff;

						.heng {
							position: absolute;
							width: 33px;
							height: 3px;
							background: #ffffff;
							border-radius: 15px;
							bottom: -10px;
						}
					}
				}
			}

			.conLeft1 {
				min-width: 411px;
			}

			.rightView {
				flex: 1;
				padding: 14px 0 14px 14px;
				height: calc(100% - 28px);

				.box {
					flex: 1;
					margin-bottom: 12px;
					min-height: 0;
					/* 关键！防止弹性项被内容撑开 */
					position: relative;

					/* 为视频定位做准备 */
					.videoList {
						background-color: #2C2C2C;
						height: 100%;
						overflow: hidden;

						.xuanZhongXiaoGuo {
							border: 2px solid #00E47C;
							box-sizing: border-box;
						}
					}
				}

				.bottom {
					width: 100%;

					.diYiHang {
						height: 72px;
						background: #2c2c2c;
						margin-bottom: 3px;

						.sbzt {
							margin-left: 34px;

							.input {
								margin-left: 14px;
							}
						}

						.kqgb {
							width: 132px;
							height: 36px;
							background: #5c5c5c;
							border-radius: 42px;
							box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
							font-size: 16px;
							font-family: Microsoft YaHei, Microsoft YaHei-400;
							font-weight: 400;

							.icon {
								width: 24px;

								image {
									width: 24px;
								}
							}
						}

						.kqgb1 {
							width: 132px;
							height: 36px;
							background: linear-gradient(270deg, #3e8fed 0%, #165fff);
							border-radius: 42px;
							box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
							font-size: 16px;
							font-family: Microsoft YaHei, Microsoft YaHei-400;
							font-weight: 400;

							.icon {
								width: 24px;

								image {
									width: 24px;
								}
							}
						}

						.lunxun {
							padding: 10px 8px;
							background: #585858;
							border-radius: 6px;
							box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.41) inset, 0px -3px 10px 0px #818181 inset, 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
							margin-left: 24px;
						}
					}
				}

				.DiYiHang {
					height: 40px;
					background: #383838;
					margin-bottom: 1px;

					.niu {
						width: 50px;
						height: 40px;
						background: #383838;
					}

					.name {
						width: 56px;
						height: 40px;
						background: #383838;
						margin-right: 40px;

						text {
							padding-left: 24px;
						}
					}

					.miaoShu {
						flex: 1;
						height: 40px;
						background: #383838;

						text {
							padding-left: 14px;
						}
					}

					.type {
						width: 108px;
						height: 40px;
						background: #383838;
						text-align: center;

					}

					.sta {
						width: 108px;
						height: 40px;
						background: #383838;

						.sta1 {
							width: 47px;
							height: 20px;
							background: #5c5c5c;
							border: 1px solid #9f9f9f;
							border-radius: 2px;
							font-size: 12px;
							font-family: Source Han Sans CN, Source Han Sans CN-400;
							font-weight: 400;
							color: #9f9f9f;
						}

						.sta2 {
							width: 47px;
							height: 20px;
							background: rgba(39, 225, 122, 0.20);
							border: 1px solid #27e17a;
							border-radius: 2px;
							font-size: 12px;
							font-family: Source Han Sans CN, Source Han Sans CN-400;
							font-weight: 400;
							text-align: LEFT;
							color: #27e17a;
						}

						.sta3 {
							width: 61px;
							height: 20px;
							background: rgba(240, 88, 98, 0.20);
							border: 1px solid #f05862;
							border-radius: 2px;
							font-size: 12px;
							font-family: Source Han Sans CN, Source Han Sans CN-400;
							font-weight: 400;
							text-align: LEFT;
							color: #f05862;
						}
					}

					.caoZuo {
						width: 228px;

						.shanchu {
							margin-left: 10px;

							.text {
								font-size: 14px;
								font-family: Source Han Sans CN, Source Han Sans CN-400;
								font-weight: 400;
								text-align: CENTER;
								color: #D46262;
								margin-left: 5px;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}
	}

	.LayoutPop {
		position: fixed;
		width: 536px;
		height: 541px;
		background: #1e1e1e;
		border: 1px solid #383838;
		border-radius: 6px;
		box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
		bottom: 255px;
		right: 100px;
		z-index: 999;

		.title {
			font-size: 14px;
			font-family: Microsoft YaHei, Microsoft YaHei-400;
			font-weight: 400;
			text-align: LEFT;
			color: #ffffff;
			margin: 24px;
		}

		.list {

			.item {
				width: 68px;
				height: 68px;
				border-radius: 6px;
				margin: 0 10px;
				margin-bottom: 15px;

				.icon {
					width: 46px;
				}

				.text {
					font-size: 14px;
					font-family: Source Han Sans CN, Source Han Sans CN-500;
					font-weight: 500;
					text-align: LEFT;
					color: #5c5c5c;
				}
			}

			.item1 {
				background: #2c2c2c;

				.text {
					color: #fff;
				}
			}
		}
	}

	.mar10 {
		margin-right: 10px;
	}

	.mab10 {
		margin-bottom: 10px;
	}

	.flex1 {
		min-height: 0;
		/* 关键！防止弹性项被内容撑开 */
		position: relative;
	}
</style>